<!DOCTYPE html>
<html>
	<!--信息录入--> 
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<span>姓名</span>
				<input type="text"  placeholder="请输入学生姓名" v-model="name"/>
			</div>
			<div>
				<span>年龄</span>
				<input type="text"  placeholder="请输入学生年龄" v-model="age"/>
			</div>
			<div>
				<span>性别</span>
				<select v-model="sex">
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</div>
			<div>
				<span>手机号</span>
				<input type="text" placeholder="请输入手机号" v-model="phone"/>
			</div>  
			<button @click="addUser">创建新用户</button>
			<table>
				<thead>
					<tr>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>手机号</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="person in persons">
						<td>{{person.name}}</td>
						<td>{{person.age}}</td>
						<td>{{person.sex}}</td>
						<td>{{person.phone}}</td>
						<td><button @click="removeUser(person)">删除</button></td>
					</tr>
					
				</tbody>
			</table>
			
		</div>
		
	</body>
	<script type="text/javascript" src="js/vue.js" ></script>
	
	<script>
			/*persons:[
					{name:"老刘1",age:18,sex:'男',phone:'1234'},
					{name:"老刘2",age:11,sex:'男',phone:'1232'},
					{name:"老刘3",age:12,sex:'女',phone:'1233'},
					{name:"老刘4",age:13,sex:'男',phone:'1235'},
				]*/
				//删除的方法  数组.splice(index,1)
		new Vue({
	        el:"#app",
	        data:{
	        	name:'',
	        	age:'',
	        	sex:'男',
	        	phone:'',
	        	persons:[]
	        },
	        methods:{
	        	addUser:function(){
	        		let parsedAge = parseInt(this.age);
        			let parsedPhone = parseInt(this.phone);
	        		if(this.name===''||this.age===''||this.phone===''){
	        			this.name = '';
            			this.age = '';
            			this.phone = '';
	        			alert('用户名、年龄或者电话不能为空');
	        		} else if(!Number.isInteger(parsedAge) || !Number.isInteger(parsedPhone)){
	        			alert('年龄或者电话的格式不对,请重新输入');
//	        			this.name = '';
            			this.age = '';
            			this.phone = '';
	        		} else if(parsedAge <= 0){
	        			alert('年龄大小不正确,请重新输入');
	        			this.age = '';
	        		} else {
		        			this.persons.push({
		        			name:this.name,
		        			age:this.age,
		        			sex:this.sex,
		        			phone:this.phone
		        		});
		        		alert('创建成功!');
		        		this.name = '';
            			this.age = '';
            			this.phone = '';
	        		}
	        		
	        	},
	        	removeUser:function(person){
	        		var index = this.persons.indexOf(person)
	        		if(index !== -1){
	        			this.persons.splice(index,1);
	        			alert('删除成功!');
	        		} else {
	        			alert('删除失败!');
	        		}
	        		
	        	}
	        }
	    });
	</script>
</html>
